<template>
  <div class="box">
        <div class="box-1">
            <div class="title">
                <p>汇方圆</p>
            </div>
            <div class="big-title">
                <p>菜品兑换券</p>
            </div>
            <button>
                    <p>领取到卡包</p>
            </button>
            <div class="text">
                <div class="text3">
                    <span class="text1">使用条件：</span>
                    <span class="text2">购买鱼香肉丝、素菜可用</span>
                </div>
                <div>
                    <span class="text1">可用时间：</span>
                    <span class="text2">2019.10.01-2019.10.18，周一至周日 11:00-22:00</span>
                </div>
            </div>
            <div class="line"></div>
            <div class="img">
                <img src="/static/imgs_s07/s07_cheer.png" alt="提示错误" class="img1">
                <div class="nav">
                    <p>汇方圆简介</p>
                    <img src="/static/imgs_s07/s07_arrowhead.png" alt="提示错误" class="img2">
                </div>
            </div>
        </div>
        <div class="circle"></div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        
        .box{
            width: 100%;
            height: 100%;
            position: relative;
            background-color: #32B16C;
        }
        .circle{
            position: absolute;
            left: 163px;
            top: 68px;
            width:48px;
            height:48px;
            background:rgba(228,228,228,1);
            border-radius:50%;  
        }
        .box-1{
            position: absolute;
            left: 9px;
            top: 92px;
            display: flex;
            flex-direction: column;
            align-items: center;
            width:356px;
            background:rgba(255,255,255,1);
            border-radius:6px;
        }
        .title{
            font-size:13px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color:rgba(136,136,136,1);
            margin-top: 39px;
        }
        .big-title{
            font-size:24px;
            font-family:Source Han Sans CN;
            font-weight:500;
            color:rgba(0,0,0,1);
            margin-top: 19px;
        }
        .line{
            width:356px;
            border-bottom:1px dashed rgba(238,238,238,1);
            margin-top: 24px;
        }
        .text{
            margin-top: 27px;
        }
        .text1{
            font-size:12px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color:rgba(51,51,51,1);
        }
        .text2{
            font-size:12px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color:rgba(136,136,136,1);
        }
        .text3{
            margin-bottom: 9px;
        }
        button{
            width:332px;
            height:39px;
            background:rgba(50,177,108,1);
            border-radius:6px;
            margin-top: 31px;
            margin-bottom: 27px;
        }
        button p{
            font-size:16px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color:rgba(255,255,255,1);
        }
        .img1{
            width: 332px;
            height: 139px;
        }
        .img{
            position: relative;
            width: 332px;
            height: 139px;
            margin-top: 15px;
            margin-bottom: 16px;
        }
        .nav{
            position: absolute;
            top: 110px;
            left: 0;
            width:332px;
            height:29px;
            background:rgba(0,0,0,1);
            opacity:0.5;
        }
        .nav p{
            position: absolute;
            top: 9px;
            left: 12px;
            font-size:12px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color:rgba(255,255,255,1);
        }
        .nav .img2{
            width: 13px;
            height: 13px;
            position: absolute;
            top: 8px;
            right: 8px;
        }
    </style>
